import React from 'react'

const Todos = (props) => (
    <ul>
      {
        props.todoList.map((item) => (
          <li key={item.id}>{item.content} </li>
        ))
      }
    </ul>
  )

class Home extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      newTodo: {
        content: '',
        done: false
      },
      todoList: [{content: '默认', done: false, id: Date.now()}]
    }
    this.handleAddTodo = this.handleAddTodo.bind(this)
    this.handleChangeContent = this.handleChangeContent.bind(this)
  }

  handleChangeContent (e) {
    this.setState({newTodo: {content: e.target.value}})
  }
  handleAddTodo () {
    const nextTodoList = this.state.todoList.concat(Object.assign({}, this.state.newTodo, {id: Date.now()}))
    const nextNewTodo = {content: '', done: false}
    this.setState({todoList: nextTodoList, newTodo: nextNewTodo})
  }

  render () {
    return (
      <div>
        <h2>Todos</h2>
        <input type="text" onChange={this.handleChangeContent} value={this.state.newTodo.content} placeholder="输入任务" />
        <button onClick={this.handleAddTodo}>添加</button>
        <Todos todoList={this.state.todoList} />
      </div>
      )
  }

}

export default Home